<template>
  <el-dialog
			custom-class="draggable_tab_sort"
			:visible.sync="dialogVisible"
			width="400px"
			top="4vh"
			append-to-body
			:close-on-click-modal="false"
			:close-on-press-escape="false"
      @open="handleDiaOpen"
      @close="close"
			>
      <div slot="title" class="dialog_title">
        <span class="tit">自定义列表</span>
        <el-tooltip class="item" effect="dark" content="勾选需要显示的列，点击拖动按钮进行拖动排序。" placement="top">
          <button class="circleButton" style="margin-left: -2px;" type="button">?</button>
        </el-tooltip>
      </div>
			<div class="content">

				<div class="top">
          <div class="sel_all">
            <div class="l">
              <el-checkbox :indeterminate="isIndeterminate" v-model="diaSelAllCheck" @change="handleCheckAllChange" label="全选"></el-checkbox>
            </div>
            <div class="r"></div>
          </div>
					<draggable v-model="forSortColumns" handle=".r" :scroll="true" @update="datadragEnd" :animation="500">
            <transition-group>
              <template >
                <div class="sel_all" v-for="(item, index) in forSortColumns" :key="item.prop">
                  <div class="l">
                    <el-checkbox @change="handleItemCheck" :disabled="item.checkedDisable" v-model="item.checked" :label="item.label"></el-checkbox>
                  </div>
                  <div class="r">
                    <img :src="draggedIcon" title="拖动" alt="">
                  </div>
                </div>
              </template>
            </transition-group>
          </draggable>
          <div class="sel_all last" v-if="!hideHandleBtn">
            <div class="l">
              <el-checkbox :disabled="true" v-model="diaOptCheck" label="操作"></el-checkbox>
            </div>
            <div class="r"></div>
          </div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="handleDialogClose">保 存</el-button>
				<el-button size="small" @click="close">关 闭</el-button>
				<el-button size="small" @click="handleDiaReset">恢复默认</el-button>
			</span>
		</el-dialog>
</template>
<!--
  传入的数组--示例
  label: '告警图片', 字段名称
  prop: 'warningSource',  props
  checked: true,  是否选中
  checkedDisable: true,  是否禁用选中状态
  其余字段为表格自定义字段，可自行定义
 -->
<script>
import draggedIcon from "@/assets/image/draggedIcon.png";
import draggable from 'vuedraggable';
import {insertUserMemoryOperate} from "@/api/system/custom";
  export default {
    components:{
      draggable
    },
    props:{
      memoryType:{
        type:String,
        default:''
      },
      columns:{
        type:Array,
        default:()=>[]
      },
      defaultList:{
        type:Array,
        default:()=>[]
      },
      dialogVisible:{
        type:Boolean,
        default:false
      },
      hideHandleBtn:{
        type:Boolean,
        default:false
      }
    },
    mounted(){
      this.backupColumns = JSON.parse(JSON.stringify(this.defaultList))
    },
    data(){
      return {
        draggedIcon,
        isIndeterminate:null, // 全选按钮选中状态
        diaSelAllCheck:null, // 全选按钮
        forSortColumns:[], // 排序列表
        backupColumns:[], // 提前存储默认数组
        diaOptCheck: true, // 操作列不参与循环
      }
    },
    methods:{
      // 弹窗打开
    handleDiaOpen(){
      this.forSortColumns = JSON.parse(JSON.stringify(this.columns));
      this.handleItemCheck();
    },
    handleItemCheck() {
      // 判断是否已经全选
      if(!this.forSortColumns.some(item =>item.checkedDisable ? false : item.checked == false)){ // 全选
        this.setStateIsTrue();
        return;
      }
      if(!this.forSortColumns.some(item =>item.checkedDisable ? false : item.checked == true)) { // 全不选
        this.setStateIsFalse();
        return;
      }
      // 半选
      this.isIndeterminate = true;
      this.diaSelAllCheck = true;
    },
    /**
     * 设置checkbox为勾选状态
     */
     setStateIsTrue(){
      this.isIndeterminate = false;
      this.diaSelAllCheck = true;
    },
    /**
     * 设置checkbox为未选状态
     */
    setStateIsFalse(){
      this.isIndeterminate = false;
      this.diaSelAllCheck = false;
    },
    // 恢复默认
    handleDiaReset() {
      // this.dialogVisible = false
      this.setStateIsTrue()
      // this.columns = this.backupColumns
      this.forSortColumns = JSON.parse(JSON.stringify(this.defaultList))
    },
     // 排序弹窗关闭保存
     handleDialogClose(){
      let sortList = JSON.parse(JSON.stringify(this.forSortColumns));
       let params = {
         memoryType:this.memoryType,
         userId: this.$store.getters.userInfo.userId,
         memoryTable: JSON.stringify(sortList)
       }
       insertUserMemoryOperate(params).then(res=>{
        if(res.code === 200) {
          this.$emit('update:columns',sortList);
          this.$emit('doLayout');
        }else {
          this.$message.error("自定义列表保存错误。")
          this.close();
        }
      })
    },
    // 拖动中
    datadragEnd(e){
      e.preventDefault();
    },
    close(){
      this.$emit('update:dialogVisible',false);
    },
    handleCheckAllChange(val){
      if(val == true){
        this.diaSelAllCheck = true
        // 全选
        this.forSortColumns.forEach(item => {
          item.checked = true
        })
        this.isIndeterminate = false
      } else if(val == false && this.isIndeterminate == false) {
        // 取消全选
        this.diaSelAllCheck = false
        this.forSortColumns.forEach(item => {
          if(!item.checkedDisable) {
            item.checked = false
          }
        })

      }else{
        console.log('')
      }
    },
    }
  }
</script>
<style lang="scss" scoped>
.circleButton {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background-color: orange;
  color: white;
  font-size: 12px;
  line-height: 16px;
  position: relative;
  left: 5px;
  top: 0px;
}
.dialog_title {
  display: flex;
  align-items: center;
}
</style>
<style lang="scss">
.draggable_tab_sort{
  .dialog-footer {
    .el-button {
      margin-left: 10px !important;
    }
  }

  .el-dialog__body .content .sel_all .el-checkbox__label {
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
    line-height: 22px;
  }
  .el-dialog__header{
    .tit{
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0,0,0,0.85);
      line-height: 1;
    }
  }
  .el-dialog__body{
    padding: 8px 0;
    background: #F5F7FA ;
    .content{
      min-height: 300px;
      overflow: auto;
      max-height: 500px;
    }
    .sel_all{
      display: flex;
      align-items: center;
      background: #fff;
      justify-content: space-between;
      padding: 6px 24px 6px 21px;
      margin-bottom: 4px;
      .m{
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0,0,0,0.65);
        line-height: 22px;
      }
      .r{
        cursor: pointer;
        width: 16px;
        height: 16px;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .last{
      margin-top: 12px;
      margin-bottom: 0;
    }
  }
}
</style>
